前言

繼昨天align-items，今天來討論align-content。

Flex Container 主要屬性:

align-content屬性值

當彈性容器所在的交叉軸方向有額外的空間時，align-content 屬性指定彈性線在彈性框容器中如何沿著交叉軸分佈額外的空間，

類似於 justify-content 對齊主軸內的個別項目的方式，只是align-content處理的是彈性容器內的彈性行在交叉軸方向的對齊行為。
與昨天提到的 align-items 不同， align-items 控制的是彈性項目在每個彈性行內的放置方式。

注意！align-content 屬性對單行彈性容器沒有影響，只會作用在包含多個彈性行的彈性容器，不會影響不允許換行的單行彈性容器。

以下是 align-content 屬性值：

圖片取自CSS Flexible Box Layout Module Level 1 -8.4

align-content: stretch

為預設值。
彈性線會拉伸以佔用額外的空間，額外的空間平均分佈為各行拉伸的距離。

align-content: flex-start || flex-end

flex-start 屬性值線條會朝向彈性容器的起點進行包裝。彈性容器中第一行的交叉起始（cross-start）邊緣與彈性容器的交叉起始邊緣齊平放置，每一行接下來的彈性行都與前一行對齊。

flex-end屬性值則是線條會朝向彈性容器的尾端進行包裝，最後一行的交叉尾端（cross-end）邊緣與彈性容器的交叉尾端邊緣齊平放置，每一行前面的彈性行都與它後面那一行對齊。

align-content: center

彈性線會朝向彈性容器的中心包裝。彈性容器中的彈性線會彼此齊平放置，並對齊在彈性容器的中心，彈性容器的交叉起始（cross-start）邊緣至彈性容器中的第一行之間距離，與彈性容器的交叉尾端（cross-end）邊緣至彈性容器中的最後一行之間距離相等。

align-content: space-between

彈性行會均勻分佈在彈性容器中，平均分佈是以「可用空間」角度來看，而不是彈性行大小來看。第一個彈性行會貼緊彈性容器的交叉起始（cross-start），最後一行則貼緊交叉尾端（cross-end），額外空間則平均分佈在彈性行之間，使任兩條彈性行之間距離相等。

align-content: space-around

彈性線均勻的分佈在所在的彈性容器，與space-between不同的是彈性行不會緊貼邊緣，而且cross-start到第一個彈性行以及cross-end到最後一個彈性行的距離，是其他任兩彈性行之間距離的一半。

align-content: space-evenly

彈性線均勻的分佈在所在的彈性容器，與space-around相同的是彈性行不會緊貼邊緣，但彼此間距相同。

各屬性值對溢出發生時的不同行為

假設彈性容器的高小於彈性行高的總和，使得彈性容器沒有足夠高度容納所有彈性行。
當彈性行溢出時：

• align-content: stretch || flex-start || space-between ，彈性行都是從cross-end溢出。
• align-content: center || space-around ，彈性行會平均從cross-end跟cross-start兩側溢出。
• align-content: flex-end ，只有它彈性行是從cross-start溢出。

參考資料

書籍<CSS大全第四版>

[CSS Flexible Box Layout Module Level 1 -8.4](https://www.w3.org/TR/css-flexbox-1/#align-content-property

Mdn : align-content

W3school - CSS align-items Property